<script setup>
import { ref } from 'vue'
import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 搜索关键词
const searchKeyword = ref('')

// 品牌数据
const brandData = ref([
  {
    id: 1,
    name: '品牌A',
    logo: 'http://example.com/logo.png',
    sort: 1,
    status: '启用',
    createTime: '2024-01-01'
  }
])

// 处理搜索
const handleSearch = () => {
  console.log('搜索关键词:', searchKeyword.value)
}

// 操作按钮事件
const handleAdd = () => {
  ElMessage.success('点击了新增按钮')
}

const handleEdit = (row) => {
  ElMessage.success(`点击了编辑按钮，编辑的是：${row.name}`)
}

const handleDelete = (row) => {
  ElMessage.success(`点击了删除按钮，删除的是：${row.name}`)
}
</script>

<template>
  <div class="brand-tab">
    <div class="operation-bar">
      <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
      <el-button type="primary" :icon="Edit">编辑</el-button>
      <el-button type="primary" :icon="Delete">删除</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
      <el-button type="primary">日志</el-button>
      
      <div class="search-box">
        <span>品牌名称</span>
        <el-input
          v-model="searchKeyword"
          placeholder="请输入品牌名称"
          class="search-input"
        />
        <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <div class="main-content">
      <el-table :data="brandData">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="品牌名称" />
        <el-table-column prop="logo" label="品牌Logo">
          <template #default="scope">
            <el-image :src="scope.row.logo" style="width: 50px; height: 50px" />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="80" />
        <el-table-column prop="status" label="状态" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="primary" link @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.brand-tab {
  .operation-bar {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;

    .search-box {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;

      .search-input {
        width: 200px;
      }
    }
  }

  .main-content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    min-height: 400px;
  }
}
</style> 